<template>
    <!-- 搜索头 -->
    <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
        <el-form-item>
            <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
                查看已删门店
            </el-checkbox>
        </el-form-item>
        <el-form-item>
            <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd"
                type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
                <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-select filterable placeholder="机台类型" :clearable='true' v-model="formInline.project_type"
                style="width:100px">
                <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-select filterable v-model="formInline.is_check" placeholder="请选择考核类型" style="width:160px">
                <el-option v-for="item in checkList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <dj-button size="small" @search="searchClick" />
        </el-form-item>
    </el-form>
</template>

<script>
    import {
        getStoreList,
        getType,
    } from "@/api/searchHeader/dj-search-tbst";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        props: ["categoryId"],
        data() {
            return {
                storeList: [],
                typeList: [],
                checkList: [{ name: '全部', id: '' }, { name: '考核类', id: '1' }, { name: '非考核类', id: '2' }],
                formInline: {
                    store_id: '',
                    project_type: '',
                    begin_time: '',
                    end_time: '',
                    is_check: '',
                    look_del: '0'
                },
                pickerOptions: pickerOptionsF(-1),
                pickerDate: pickerDateF(-1, -1)
            };
        },
        methods: {
            lookDelChange() {
                this.getStore();
            },
            beforeComingIn(toValue) {
                if (toValue.from == 1) {
                    if (this.formInline.store_id == toValue.store_id && this.formInline.project_type == toValue.project_type && this.pickerDate == toValue.pickerDate) {
                        return;
                    }
                    this.formInline.store_id = toValue.store_id;
                    this.formInline.project_type = toValue.project_type;
                    this.formInline.look_del = toValue.look_del;
                    this.pickerDate = toValue.pickerDate;
                    if (this.storeList.length == 0) {
                        this.getStore(1);
                        this.getMachineType();
                    } else {
                        this.searchClick();
                    }
                } else {
                    this.getStore();
                    this.getMachineType();
                }
            },
            getStore(ok) {
                getStoreList({ look_del: this.formInline.look_del, category_id: this.categoryId }).then(response => {
                    this.storeList = response;
                    // console.log('sid',this.$route.params.store_id)
                    if(this.$route.params.store_id){
                        this.formInline.store_id = this.$route.params.store_id
                    }else if(!this.formInline.store_id){
                        let data = response.filter(res => 
                            res.id == this.$store.getters.optionId
                        )
                        if(data.length>0){
                            this.formInline.store_id = data[0].id;
                        } else {
                            if(this.storeList.length > 0) {
                                this.formInline.store_id = this.storeList[0].id;
                            }
                        }
                    }
                    if (this.formInline.store_id && ok) {
                        this.searchClick();
                    }
                });
            },
            getMachineType() {
                getType({}).then(response => {
                    this.typeList = response;
                });
            },
            // 搜索
            searchClick() {
                if (this.formInline.project_type == '' || this.formInline.store_id == '') {
                    this.$message({ type: 'error', message: '请选择门店和机台类型再进行查询' });
                    return;
                }
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    //第一个参数名为调用的方法名，第二个参数为需要传递的参数
                    this.$emit('fetchData', this.formInline);
                });
            },
        }
    };
</script>